<script setup lang="ts">
  import { queryList } from '@/api/organization/nursing-home';
  import { getOverview } from '@/api/dashboard';
  import { useSkeleton } from '@/hooks/arco/useSkeleton';
  import { ref } from 'vue';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { useUserStore } from '@/store';
  import chartBar1 from './options/bar1';
  import pieBar2 from './options/bar2';
  import Table1 from './table/table1.vue';
  import Table2 from './table/table2.vue';

  const userStore = useUserStore();

  const dataArr = (record: any) => {
    return [
      {
        value: record.elderNum,
        name: '在住长者总数',
        unit: '人',
      },
      {
        value: record.admitElderNum,
        name: '用药长者总数',
        unit: '人',
      },
      {
        value: record.drugNum,
        name: '药品种类总数',
        unit: '种',
      },
      {
        value: record.usageRate,
        name: '药柜使用率',
        unit: '%',
      },
      {
        value: record.totalElderNum,
        name: '累计服务长者总数',
        unit: '人',
      },
      {
        value: record.totalScheduleNum,
        name: '累计用药总数',
        unit: '次',
      },
    ];
  };

  const placeholder = {
    elderNum: 12,
    admitElderNum: 2,
    drugNum: 26,
    usageRate: '100.00%',
    totalElderNum: 12,
    totalScheduleNum: 0,
  };

  const overview = useSkeleton({
    immediate: false,
    apiFun: getOverview,
    transformDataFun(data) {
      return {
        numberBar: dataArr(data),
        chartBar1: chartBar1(data.ageDist),
        pieBar2: pieBar2(data.purposeDistList),
        drugDistList: data.drugDistList,
        warningDrugList: data.warningDrugList,
      };
    },
    placeholderResult: {
      numberBar: dataArr(placeholder),
      drugDistList: [],
      warningDrugList: [],
    },
  });

  const branchSelect = useSelectOption({
    apiFun: queryList,
    fieldNames: {
      value: 'id',
      label: 'name',
    },
    onSuccess(data) {
      overview.execute(data.map((e: any) => e.value));
    },
    onChange(id) {
      if (id) {
        overview.execute([id]);
      } else {
        overview.execute(branchSelect.bindProps.data.map((e: any) => e.value));
      }
    },
  });

  const branchId = ref('');
</script>

<template>
  <skeleton-view v-slot="{ data }" v-bind="overview.bindProps">
    <a-row class="grid-demo" :gutter="[12, 12]" wrap>
      <a-col :xs="16" :sm="18" :md="18" :lg="18" :xl="18" :xxl="20">
        <div>
          <span class="card-name">数据概览</span>
          <ul class="data-ul flex justify-between mt-3 flex-wrap gap-4">
            <li
              v-for="(item, index) in data.numberBar"
              :key="index"
              class="flex flex-col items-center"
            >
              <span class="leading-none inline-flex items-end align-top">
                <span class="number">{{ item.value }}</span>
                <span class="text">{{ item.unit }}</span>
              </span>
              <span class="text-sm mt-3">{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </a-col>
      <a-col :xs="8" :sm="6" :md="6" :lg="6" :xl="6" :xxl="4">
        <div>
          <span class="card-name">你好，{{ userStore.staffName }}</span>
          <a-form-item label="登录账号" class="mb-0">
            <span>{{ userStore.staffPhone }}</span>
          </a-form-item>
          <a-form-item label="所选院区" class="mb-0">
            <a-select
              v-model="branchId"
              allow-clear
              v-bind="branchSelect.bindProps"
            />
          </a-form-item>
        </div>
      </a-col>
      <a-col :xs="24" :lg="12">
        <div class="chart-box">
          <span class="card-name">用药年龄分布统计</span>
          <div class="flex-1 skeleton-cover">
            <Chart :options="data.chartBar1" />
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :lg="12">
        <div class="chart-box">
          <span class="card-name">用药需求分布统计</span>
          <div class="flex-1 skeleton-cover">
            <Chart :options="data.pieBar2" />
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :lg="12">
        <div class="chart-box">
          <span class="card-name pb-4">药品使用排行</span>
          <div class="flex-1 skeleton-cover">
            <Table1 :data="data.drugDistList" />
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :lg="12">
        <div class="chart-box">
          <span class="card-name pb-4">药品库存预警统计</span>
          <div class="flex-1 skeleton-cover">
            <Table2 :data="data.warningDrugList" />
          </div>
        </div>
      </a-col>
    </a-row>
  </skeleton-view>
</template>

<style lang="less" scoped>
  .grid-demo .arco-col {
    .card-name {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }

    .data-ul {
      span {
        vertical-align: bottom; /* 强制将底部对齐 */
        color: #333333;
      }

      .number {
        font-size: 24px; /* 数字字体稍大 */
        color: #333333;
      }

      .text {
        color: #666666;
        font-size: 14px; /* 文字字体稍小 */
        line-height: 17px; /* 设置行高一致 */
      }
    }
  }
  .grid-demo .arco-col > div {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    background-color: #ffffff;
    border-radius: 6px;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
  }

  .chart-box {
    aspect-ratio: 16 / 7;
  }
</style>
